<template>
  <div class="event">
    <div class="bg" :style="{height: bgHeight + 'px'}">
      <div class="logo">
        <img src="../../../images/events/event_2019_01/logo.png">
        <span>共青团浙江省委主办</span>
      </div>
      <div class="avatar">
        <img :src="obj.headUrl" alt="">
      </div>
    </div>
    <div class="content" :style="{height: 'calc(100% + ' + shiftY + 'px)'}">
      <span class="username">{{obj.name}}</span><br>
      <span class="donation-count">
        共计捐款<span class="num">&nbsp;{{obj.number}}&nbsp;</span>次
      </span><br>
      <span class="project-count">
        帮助<span class="num">&nbsp;{{obj.project}}&nbsp;</span>个项目
      </span><br>
      <div class="love-step">
        我的爱心历程
      </div>
      <div class="steps" :style="{height: (stepsContainerHeight + shiftY) + 'px'}">
        <div class="steps-container" :style="stepContainerStyle">
          <div class="step step1 r">
            <span class="date">{{obj.joinTime}}</span><br>
            <span class="title">来到爱心的大家庭</span><br>
            <img src="../../../images/events/event_2019_01/step1_slogan.png" alt="">
          </div>
          <div class="step step2 l">
            <span class="date">{{obj.donateFirstTime}}</span><br>
            <span class="title">献出第一份爱心</span><br>
            <img src="../../../images/events/event_2019_01/step2_slogan.png" alt="">
          </div>
          <div class="step step3 r">
            <span class="date">{{obj.togetherTime}}</span><br>
            <span class="title">第一次邀请朋友一起捐</span><br>
            <img src="../../../images/events/event_2019_01/step3_slogan.png" alt="">
          </div>
          <div class="step step4 l">
            <span class="date">{{obj.totalMoney}}</span><br>
            <span class="title">累计捐款金额</span><br>
            <img src="../../../images/events/event_2019_01/step4_slogan.png" alt="">
          </div>
        </div>
      </div>
      <div class="project">
        <div class="title">在这一年里，您参与的项目有：</div>
        <div class="card donate-info">
          <span class="time">
            在{{obj.donateNewTime}}，您向
          </span><br>
          <span class="project-name">
            -&nbsp;{{obj.eventName}}&nbsp;-
          </span><br>
          <span class="sum">
            捐助&nbsp;<span>{{obj.amount}}</span>&nbsp;元
          </span>
        </div>
        <div class="card project-info">
          <div class="project-thumb">
            <img :src="'//www.qqchou.org' + obj.eventPicUrl" alt="">
          </div>
          <div class="project-name">
            {{obj.eventAbstract}}
          </div>
          <div class="progress">
            <div class="progress-bar">
              <div class="fill" :style="{width: Math.min(100, obj.schedule) + '%'}"></div>
            </div><span>{{obj.schedule}}%</span>
          </div>
          <div class="bottom">
            <span>目标&nbsp;<span class="light">{{obj.eventGoalAmount}}</span>&nbsp;元</span>
            <span>参加&nbsp;<span class="light">{{obj.attendPeople}}</span>&nbsp;人次</span>
          </div>
        </div>
      </div>
      <div class="thank">
        <div class="thankyou">
          感谢您让这个世界变得美好！
        </div>
        <div class="thankyou down">
          新的一年，祝您身体健康，阖家幸福。
        </div>
        <div class="help">
          帮助更多的人,看看这些推荐项目
        </div>
      </div>
      <div class="results">
        <div class="title">亲青筹公益众筹平台成果</div>
        <div class="sum"><span>999,999,999</span>&nbsp;元总捐款金额</div>
        <div class="sum"><span>999,999,999</span>&nbsp;次爱心捐助</div>
        <div class="sum"><span>999,999,999</span>&nbsp;个项目获得帮助</div>
      </div>
      <div class="contact">
        亲青筹联系电话：0571-87029667
      </div>
    </div>
  </div>
</template>
<style lang="scss" src="./event201901.scss"></style>
<script src="./event201901.js"></script>
